<template>
    <div class="ph-input-wrap" data-ph="datetime-picker">
        <ph-input class="ph-input-start" :placeholder="placeholderStart" :value="dirtyStart" :readonly="true" :disabled="disabled" @click.stop="onClick"/>
        <div class="ph-input-divider"></div>
        <ph-input class="ph-input-end" :placeholder="placeholderEnd" :value="dirtyEnd" :readonly="true" :disabled="disabled" @click.stop="onClick"/>
        <ph-datetime-button 
            class="ph-input-raddon" 
            :double="true"
            :theme="theme" 
            :weekText="weekText"
            :importants="importants"
            :now="now"
            :clear="clear"
            :min="min" 
            :max="max" 
            :start="dirtyStart" 
            :end="dirtyEnd" 
            :type="type" 
            :format="vfmt" 
            :disabled="disabled"
            @pick="onPick" 
            @clear="onClear"
            />
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, computed } from 'vue'
import { PhDatetimeButton } from '../base'
import { datefmt, DTFormat } from 'ph-datetime-util'
import PhInput from './input.vue'
export default defineComponent({
    props:{
        placeholderStart:{type:String},
        placeholderEnd:{type:String},
        disabled:{type:Boolean,default:false},
        start:{type:String},
        end:{type:String},
        min:{type:String},
        max:{type:String},
        theme:{type:String},
        weekText:{
            type:Array as PropType<Array<string>>
        },
        importants:{
            type:Array as PropType<Array<{title:string|number,md:string,desc:string}>>
        },
        clear:{
            type:Boolean,
            default:true
        },
        now:{
            type:Boolean,
            default:true
        },
        type:{type:String,default:"datetime"},
        format:{type:String},
    },
    setup(props,{emit}) {
        const vfmt = computed(()=>{
            return props.format||DTFormat[props.type]
        })
        const dirtyStart = ref(props.start)
        const dirtyEnd = ref(props.end)
        const onPick = (v:Array<Record<string,number>>)=>{
            dirtyStart.value = datefmt(v[0],vfmt.value)
            dirtyEnd.value = datefmt(v[1],vfmt.value)
            emit("change",[dirtyStart.value,dirtyEnd.value])
        }
        const onClear = ()=>{
            dirtyStart.value = ""
            dirtyEnd.value = ""
            emit("change",["",""])
        }
        const onClick = (e:Event)=>{
            if(props.disabled)return
            (e.target as any).parentNode.querySelector(".ph-input-raddon").click()
        }
        return {onPick,onClear,onClick,dirtyStart,dirtyEnd,vfmt}
    },
    components:{
        PhInput,
        PhDatetimeButton
    }
})
</script>